<html>

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            overflow: auto;
        }

        #testsvg {
            position: relative;
            top: 600px;
        }
    </style>
</head>

<body>

</body>
<script>
    // 创建svg的元素
    function makeSVG(tag, attrs) {
        var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
        for (var k in attrs)
            el.setAttribute(k, attrs[k]);
        return el;
    }
    var svg_wid = document.body.clientWidth;
    var svg_hei = 3500;
    // svg节点
    var svg = makeSVG("svg", {
        "version": 1.1,
        "xmlns": "http://www.w3.org/2000/svg",
        "width": svg_wid,
        "height": svg_hei,
        "stroke-linecap": "square",
        "id": "testsvg"
    });
    // 一个遮罩用来遮罩图片的显示
    var defs = makeSVG("defs", {});
    var mask = makeSVG("mask", {
        "id": "mask1"
    });
    var rect = makeSVG("rect", {
        "x": svg_wid / 6,
        "y": 0,
        "width": svg_wid / 3 * 2,
        "height": 500,
        "fill": "#ffffff",
        "id":"mask_rect1",
    });
    mask.appendChild(rect);
    defs.appendChild(mask);

    var onecurve = makeSVG("path",{
        "id":"curvepath",
        "d":"M"+(100)+" "+1260+","
        +"Q"+(svg_wid/2)+" 2000, "+(svg_wid-300)+" 1450"
    })
    defs.appendChild(onecurve);

    svg.appendChild(defs);

    // 0->500的路径
    // 第一段的所有路径
    var path1arr = [];
    var g1 = makeSVG("g", {
        "stroke": "#ff0000",
        "stroke-width": 10,
        "fill": "none"
    });
    var p1 = makeSVG("path", {
        "d": "M" + svg_wid / 2 + " 0," +
            "V" + 500,
    });
    g1.appendChild(p1);
    var p1_leng = p1.getTotalLength();
    path1arr.push({
        path: p1,
        leng: p1_leng
    });

    svg.appendChild(g1);
    // 500->1000的路径
    var path2arr = [];
    var g2 = makeSVG("g", {
        "stroke": "#00ff00",
        "stroke-width": 10,
        "fill": "none"
    });


    var p2_img = makeSVG("image", {
        "href": "../bannerimg.png",
        "x": svg_wid / 6,
        "y": 500,
        "height": 500,
        "width": svg_wid / 3 * 2,
        "mask": "url(#mask1)"
    })
    g2.appendChild(p2_img);
    path2arr.push({
        "maskid": "mask_rect1",
    })

    var p2 = makeSVG("path", {
        "d": "M" + svg_wid / 2 + " " + 500
            + ",h" + svg_wid / 3
            + ",V" + 1000
            + ",h" + (-svg_wid / 3)
    });
    g2.appendChild(p2);
    var p2_1 = makeSVG("path", {
        "d": "M" + svg_wid / 2 + " " + 500
            + ",h" + (-svg_wid / 3)
            + ",V" + 1000
            + ",h" + (svg_wid / 3)
    });
    g2.appendChild(p2_1);


    var p2_leng = p2.getTotalLength();

    // console.log("p2的图片===》", p2_img);
    path2arr.push({
        path: p2,
        leng: p2_leng
    });
    var p2_leng1 = p2_1.getTotalLength();
    path2arr.push({
        path: p2_1,
        leng: p2_leng1
    })
    svg.appendChild(g2);
    // 第3段路径
    var path3arr = [];
    var g3 = makeSVG("g", {
        "stroke": "#0000ff",
        "stroke-width": 10,
        "fill": "none"
    });
    var p3 = makeSVG("path", {
        "d": "M" + svg_wid / 2 + " 1000," +
            "V" + 1500,
    });
    g3.appendChild(p3);
    var p3_leng = p3.getTotalLength();
    path3arr.push({
        path: p3,
        leng: p3_leng
    });

    svg.appendChild(g3);

    // 第4段路径
    var path4arr = [];
    var g4 = makeSVG("g", {
        "stroke": "#ff00ff",
        "stroke-width": 10,
        "fill": "none"
    });
    var p4 = makeSVG("path", {
        "d": "M" + svg_wid / 2 + " 1500,"
            +"A"+svg_wid/6+" "+svg_wid/6+" 0 0 0 "+(svg_wid/2-svg_wid/3)+" 1500,"
            +"Q"+(svg_wid/2-svg_wid/3)+" 1700 "+(svg_wid/2)+" 2000"

    });
    g4.appendChild(p4);
    var p4_leng = p4.getTotalLength();
    path4arr.push({
        path: p4,
        leng: p4_leng
    });

    var p4_1 = makeSVG("path", {
        "d": "M" + svg_wid / 2 + " 1500,"
            +"L"+(svg_wid/2+svg_wid/6)+" "+(1500-svg_wid/6)+","
            +"L"+(svg_wid/2+svg_wid/3)+" "+(1500)+","
            +"L"+(svg_wid/2)+" "+(2000)+","
    });
    g4.appendChild(p4_1);
    var p4_leng1 = p4_1.getTotalLength();
    path4arr.push({
        path: p4_1,
        leng: p4_leng1
    });


    svg.appendChild(g4);

    var p4_txt = makeSVG("text",{
        "x":svg_wid/2,
        "y":1650,
        "text-anchor":"middle",
        // "fill":"#fff00f",
        "font-size":88,
        "stroke-width":2
    });
    var p4_txtpath = makeSVG("textPath",{
        "href":"#curvepath",
        "startOffset":"100%"
    })
    p4_txtpath.innerHTML = "点个赞再走";
    p4_txt.appendChild(p4_txtpath);
    path4arr.push({
        txtpath:p4_txtpath
    })

    g4.appendChild(p4_txt);



    document.body.appendChild(svg);
    // path信息整理
    var pathinfo = [];
    pathinfo.push({
        pathmaxy: 500,
        patharr: path1arr
    });
    pathinfo.push({
        pathmaxy: 1000,
        patharr: path2arr
    });
    pathinfo.push({
        pathmaxy: 1500,
        patharr: path3arr
    });
    pathinfo.push({
        pathmaxy:2000,
        patharr:path4arr
    });


    // 屏幕的高
    var win_hei = window.screen.height;
    // 滚动区总高度
    var scroll_hei = document.body.scrollHeight;
    // 显示区高度
    var body_hei = document.body.clientHeight;
    // 可滚动最大
    var scroll_max = scroll_hei - body_hei;
    window.onscroll = function () {
        var scrolltop = document.body.scrollTop;
        // 所在阶段前的进度是1，所在阶段后的是0，所在阶段手动计算进度
        var lastpathy = 0;
        for (var i = 0; i < pathinfo.length; i++) {
            var ipahtdata = pathinfo[i];
            var ipathmaxy = ipahtdata.pathmaxy;
            var ipatharr = ipahtdata.patharr;
            var ipathpro = 0;
            if (scrolltop >= lastpathy && scrolltop <= ipathmaxy) {
                ipathpro = (scrolltop - lastpathy) / (ipathmaxy - lastpathy);
            }
            else if (scrolltop <= lastpathy) {
                ipathpro = 0;
            }
            else if (scrolltop >= ipathmaxy) {
                ipathpro = 1;
            }

            for (var i1 = 0; i1 < ipatharr.length; i1++) {
                var i1pathdata = ipatharr[i1];
                var i1path = i1pathdata?.path;
                var i1path_leng = i1pathdata?.leng;
                var i1maskid = i1pathdata?.maskid;
                var i1txtpath = i1pathdata?.txtpath;
                if (i1maskid) {
                    let mask = document.getElementById(i1maskid);
                    mask.setAttribute("y",500*ipathpro);
                }
                else if(i1txtpath){
                    i1txtpath.setAttribute("startOffset",100*(1-ipathpro)+"%");
                }
                else {
                    i1path.setAttribute("stroke-dasharray", i1path_leng);
                    i1path.setAttribute("stroke-dashoffset", i1path_leng * (1 - ipathpro));
                }
            }

            lastpathy = ipathmaxy;
        }

        var pro = scrolltop / scroll_max;



        var span = document.createElement("span");
        span.innerHTML
    }

</script>

</html>